<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {useMessage} from "naive-ui";
import qs from "qs";
import {loadingBar} from "../HomeView_N.vue"

const currentRef = ref(1);
const currentStatus = ref("process");
const current = currentRef;

const message = useMessage();
const show = ref(false);

const loginUser = ref({
  userId:'',
  username:'',
  nickname:'',
  email:'',
  birth:'',
  gender:'',
  level:'',
  description:'',
});

const page = ref();
const pageCount = ref();
const orderNum = ref([]);
const thisPageOrder = ref([]);
const showModal = ref(false);
const thisArr = ref({
});

//查询待接单
const orderNum1 = ref([]);
const page1 = ref(1);
const pageCount1 = ref();
const thisPageOrder1 = ref([]);
let len1 = 0;

//查询进行中
const orderNum2 = ref([]);
const page2 = ref(1);
const pageCount2 = ref();
const thisPageOrder2 = ref([]);
let len2 = 0;

//查询待评价
const orderNum3 = ref([]);
const page3 = ref(1);
const pageCount3 = ref();
const thisPageOrder3 = ref([]);
let len3 = 0;

//查询已完成
const orderNum4 = ref([]);
const page4 = ref(1);
const pageCount4 = ref();
const thisPageOrder4 = ref([]);
let len4 = 0;

let pageNum = 7;
let len = 0;
const loadOrder = ()=>{
  axios.get(BASE_URL+"/v1/order/selectAll?riderId="+loginUser.value.userId+'&userId='+loginUser.value.userId).then((response) => {
      if(response.data.code == 2000){

        orderNum.value = response.data.data;
        //类型查询订单
        for(let a = 0;a<orderNum.value.length;a++){
          if(orderNum.value[a].orderStatus == '待接单'){
            orderNum1.value.push(orderNum.value[a]);
            len1++;
          }else if(orderNum.value[a].orderStatus == '进行中'){
            orderNum2.value.push(orderNum.value[a]);
            len2++;
          }else if(orderNum.value[a].orderStatus == '待评价'){
            orderNum3.value.push(orderNum.value[a]);
            len3++;
          }else {
            orderNum4.value.push(orderNum.value[a]);
            len4++;
          }
        }
        if(len1 % pageNum != 0)
          pageCount1.value = parseInt(len1/pageNum+1);
        else pageCount1.value = len1/pageNum;
        if(len2 % pageNum != 0)
          pageCount2.value = parseInt(len2/pageNum+1);
        else pageCount2.value = len2/pageNum;
        if(len3 % pageNum != 0)
          pageCount3.value = parseInt(len3/pageNum+1);
        else pageCount3.value = len3/pageNum;
        if(len4 % pageNum != 0)
          pageCount4.value = parseInt(len4/pageNum+1);
        else pageCount4.value = len4/pageNum;
        len = orderNum.value.length;
        console.log(orderNum.value);
        if(len % pageNum != 0)
          pageCount.value = parseInt(len/pageNum+1);
        else pageCount.value = len/pageNum;
        page.value = 1;
        pageChange();

        if(len1 % pageNum != 0)
          pageCount1.value = parseInt(len1/pageNum+1);
        else pageCount1.value = len1/pageNum;
        page1.value = 1;
        pageChange1();

        if(len2 % pageNum != 0)
          pageCount2.value = parseInt(len2/pageNum+1);
        else pageCount2.value = len2/pageNum;
        page2.value = 1;
        pageChange2();

        if(len3 % pageNum != 0)
          pageCount3.value = parseInt(len3/pageNum+1);
        else pageCount3.value = len3/pageNum;
        page3.value = 1;
        pageChange3();

        if(len4 % pageNum != 0)
          pageCount4.value = parseInt(len4/pageNum+1);
        else pageCount4.value = len4/pageNum;
        page4.value = 1;
        pageChange4();/**/
        //message.success('你好');

        // 设置后置路由守卫
        loadingBar.finish();
        show.value = true;
      }
      else{
        message.error('加载订单失败喽~');
      }
  })
};

const pageChange = ()=>{
  console.log(page.value);
  thisPageOrder.value = {};
  let j = 0;
  let k;
  if(page.value*pageNum>len)
  {
    k = len;
  }else k = page.value*pageNum;
  console.log(k);
  for(var i = (page.value-1)*pageNum;i<k;i++)
  {
    thisPageOrder.value[j] = orderNum.value[i];
    console.log(thisPageOrder.value[j]);
    j++;
  }
}

//查询待接单
const loadOrder1 = ()=>{
  axios.get(BASE_URL+"/v1/order/selectAll?riderId="+loginUser.value.userId+'&userId='+loginUser.value.userId+'&orderStatus='+'待接单').then((response) => {
    if(response.data.code == 2000) {
      orderNum1.value = response.data.data;
      len1 = orderNum1.value.length;
      console.log("待接单："+orderNum1.value);
      if (len1 % pageNum != 0)
        pageCount1.value = parseInt(len1 / pageNum + 1);
      else pageCount1.value = len1 / pageNum;
      page1.value = 1;
      pageChange1();
      console.log(orderNum1.value);
    }else {
      message.error('加载订单失败喽~');
    }
  })
}

const pageChange1 = ()=>{
  console.log(page1.value);
  thisPageOrder1.value = [];
  let j = 0;
  let k;
  if(page1.value*pageNum>len1)
  {
    k = len1;
  }else k = page1.value*pageNum;
  console.log(k);
  for(var i = (page1.value-1)*pageNum;i<k;i++)
  {
    thisPageOrder1.value[j] = orderNum1.value[i];
    console.log(thisPageOrder1.value[j]);
    j++;
  }
}

//查询进行中
const loadOrder2 = ()=>{
  axios.get(BASE_URL+"/v1/order/selectAll?riderId="+loginUser.value.userId+'&userId='+loginUser.value.userId+'&orderStatus='+'进行中').then((response) => {
    if(response.data.code == 2000) {

      orderNum2.value = response.data.data;
      len2 = orderNum2.value.length;
      console.log(orderNum2.value);
      if (len2 % pageNum != 0)
        pageCount2.value = parseInt(len2 / pageNum + 1);
      else pageCount2.value = len2 / pageNum;
      page2.value = 1;
      pageChange2();
    }else {
      message.error('加载订单失败喽~');
    }
  })
}

const pageChange2 = ()=>{
  console.log(page2.value);
  thisPageOrder2.value = [];
  let j = 0;
  let k;
  if(page2.value*pageNum>len2)
  {
    k = len2;
  }else k = page2.value*pageNum;
  console.log(k);
  for(var i = (page2.value-1)*pageNum;i<k;i++)
  {
    thisPageOrder2.value[j] = orderNum2.value[i];
    console.log(thisPageOrder2.value[j]);
    j++;
  }
}

//查询待评价
const loadOrder3 = ()=>{
  axios.get(BASE_URL+"/v1/order/selectAll?riderId="+loginUser.value.userId+'&userId='+loginUser.value.userId+'&orderStatus='+'待评价').then((response) => {
    if(response.data.code == 2000) {

      orderNum3.value = response.data.data;
      len3 = orderNum3.value.length;
      console.log(orderNum3.value);
      if (len3 % pageNum != 0)
        pageCount3.value = parseInt(len3 / pageNum + 1);
      else pageCount3.value = len3 / pageNum;
      page3.value = 1;
      pageChange3();
    }else {
      message.error('加载订单失败喽~');
    }
  })
}

const pageChange3 = ()=>{
  console.log(page3.value);
  thisPageOrder3.value = [];
  let j = 0;
  let k;
  if(page3.value*pageNum>len3)
  {
    k = len3;
  }else k = page3.value*pageNum;
  console.log(k);
  for(var i = (page3.value-1)*pageNum;i<k;i++)
  {
    thisPageOrder3.value[j] = orderNum3.value[i];
    console.log(thisPageOrder3.value[j]);
    j++;
  }
}

//查询已完成
const loadOrder4 = ()=>{
  axios.get(BASE_URL+"/v1/order/selectAll?riderId="+loginUser.value.userId+'&userId='+loginUser.value.userId+'&orderStatus='+'已完成').then((response) => {
    if(response.data.code == 2000) {

      orderNum4.value = response.data.data;
      len4 = orderNum4.value.length;
      console.log(orderNum4.value);
      if (len4 % pageNum != 0)
        pageCount4.value = parseInt(len4 / pageNum + 1);
      else pageCount4.value = len4 / pageNum;
      page4.value = 1;
      pageChange4();
    }else {
      message.error('加载订单失败喽~');
    }
  })
}
const pageChange4 = ()=>{
  console.log(page4.value);
  thisPageOrder4.value = [];
  let j = 0;
  let k;
  if(page4.value*pageNum>len4)
  {
    k = len4;
  }else k = page4.value*pageNum;
  console.log(k);
  for(var i = (page4.value-1)*pageNum;i<k;i++)
  {
    thisPageOrder4.value[j] = orderNum4.value[i];
    console.log(thisPageOrder4.value[j]);
    j++;
  }
}

const cardStyle = ref({width:'1000px',height:'950px'});
const showEvaluation = ref(false);
const showDisEvaluation = ref(false);
const showArriveButton = ref(false);

const showTemp = (item)=>{
  thisArr.value = item;
  console.log(thisArr.value);
  console.log(item.value);
  if(thisArr.value.orderStatus == '待接单') {
    currentRef.value = 1;
    showEvaluation.value = false;
    showArriveButton.value = false;
    showDisEvaluation.value =false;
    cardStyle.value = {width:'1000px',height:'600px'};
  }
  else if (thisArr.value.orderStatus == '进行中')
  {
    currentRef.value = 2;
    cardStyle.value = {width:'1000px',height:'600px'};
    showEvaluation.value = false;
    showArriveButton.value = false;
    showDisEvaluation.value =false;
  }
  else if (thisArr.value.orderStatus == '待评价')
  {
    cardStyle.value = {width:'1000px',height:'600px'};
    currentRef.value = 3;
    showEvaluation.value = false;
    showArriveButton.value = false;
    showDisEvaluation.value =false;
  }
  else{
    currentRef.value = 4;
    cardStyle.value = {width:'1000px',height:'950px'};
    showEvaluation.value = false;
    showArriveButton.value = false;
    showDisEvaluation.value =false;
  }
  if(thisArr.value.riderId == loginUser.value.userId && thisArr.value.orderStatus == '进行中')
  {
    cardStyle.value = {width:'1000px',height:'600px'};
    showArriveButton.value = true;
    showEvaluation.value = false;
    showDisEvaluation.value = false;
  }

  if(thisArr.value.userId == loginUser.value.userId && thisArr.value.orderStatus == '待评价')
  {
    cardStyle.value = {width:'1000px',height:'950px'};
    showEvaluation.value = true;
    showDisEvaluation.value = false;
    showArriveButton.value = false;
  }
  if(thisArr.value.orderStatus == '已完成')
  {
    cardStyle.value = {width:'1000px',height:'950px'};
    showDisEvaluation.value = true;
    showArriveButton.value = false;
    showEvaluation.value = false;
  }

}


onMounted(()=>{
  loginUser.value = getUser();
  loadOrder();
  /*loadOrder1();*/
  console.log(orderNum.value);
  console.log(thisPageOrder1.value);
  /*loadOrder2();
  loadOrder3();
  loadOrder4();*/
  console.log(loginUser.value);
});

const fileList = ref([])
const dialogImageUrl = ref('')
const showModal1 = ref(false)

const handleRemove= (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
  //1.得到要删除的图片路径 uploadFile就是我们要删除的那个图片文件对象
  let imgUrl = uploadFile.file.fullPath;
  //2.给后端发请求，删除图片
  axios.post(BASE_URL+'/v1/file/remove?imgUrl='+imgUrl)
      .then((response)=>{
        if(response.data.code == 2002){
          message.success('删除成功');
        }
      })
}

const saveOrderReview = ()=>{
  thisArr.value.orderStatus = '已完成';
  console.log(fileList.value);
  if(fileList.value.length > 0){//如果数组长度大于0，说明用户传图片了
    let imgUrls = [];//准备数组用来存储多张图片路径
    for(let i = 0; i < fileList.value.length; i++){
      imgUrls.push(fileList.value[i].fullPath);
    }
    thisArr.value.commentImgUrl = imgUrls.toString();
  }
  let data = qs.stringify(thisArr.value);
  axios.post(BASE_URL+'/v1/order/insert',data).then((response) => {
    if (response.data.code === 2000) {
      message.success('评价成功!');
      showModal.value = false;
      loadOrder();
    }else {
      message.error('失败了，请重新尝试欧~');
    }
  })
};

const orderArrive = ()=>{
  thisArr.value.orderStatus = '待评价';
  let data = qs.stringify(thisArr.value);
  axios.post(BASE_URL+'/v1/order/insert',data).then((response) => {
    if (response.data.code === 2000) {
      message.success('订单已送达!努力就会有回报!');
      showModal.value = false;
      loadOrder();
    }else {
      message.error('失败了，请联系管理员处理~');
    }
  })
}

</script>

<template>
  <n-flex justify="center" v-if="show">
    <n-card style="width: 80%;margin-bottom: 80px">
      <n-flex justify="center" style="margin-top: 20px;margin-bottom: 20px;">
        <n-tabs type="line" animated>
          <n-tab-pane name="total" tab="全部">
            <n-flex vertical justify="center" style="margin-top: 20px;margin-bottom: 20px; flex-flow: column">
              <n-list style="width: 100%" hoverable clickable>
                <n-list-item v-for="num in thisPageOrder" style="height: 170px;" @click="showTemp(num),showModal = true">
                  <n-thing :title="num.orderType">
                    <template #description>
                      <n-space size="small" style="margin-top: 4px">
                        <n-tag :bordered="false" type="success" size="small">
                          {{num.startLocation}}
                        </n-tag>
                        <n-tag :bordered="false" type="success" size="small">
                          {{num.orderType}}
                        </n-tag>
                      </n-space>

                    </template>
                    <n-rate allow-half readonly v-model:value="num.orderRate"/><br>
                    {{num.orderDescription}}
                  </n-thing>
                </n-list-item>
              </n-list>
              <n-pagination style="justify-content: center" v-model:page="page" :page-count="pageCount" @click="pageChange()"/>
            </n-flex>
          </n-tab-pane>
          <n-tab-pane name="Pending orders" tab="待接单">
            <n-flex vertical justify="center" style="margin-top: 20px;margin-bottom: 20px; flex-flow: column">
              <n-list style="width: 100%" hoverable clickable>
                <n-list-item v-for="num in thisPageOrder1" style="height: 170px;" @click="showTemp(num),showModal = true">
                  <n-thing :title="num.orderType">
                    <template #description>
                      <n-space size="small" style="margin-top: 4px">
                        <n-tag :bordered="false" type="success" size="small">
                          {{num.startLocation}}
                        </n-tag>
                        <n-tag :bordered="false" type="success" size="small">
                          {{num.orderType}}
                        </n-tag>
                      </n-space>

                    </template>
                    <n-rate allow-half readonly v-model:value="num.orderRate"/><br>
                    {{num.orderDescription}}
                  </n-thing>
                </n-list-item>
              </n-list>
              <n-pagination style="justify-content: center" v-model:page="page1" :page-count="pageCount1" @click="pageChange1"/>
            </n-flex>
          </n-tab-pane>
          <n-tab-pane name="carry out" tab="进行中">
            <n-flex vertical justify="center" style="margin-top: 20px;margin-bottom: 20px; flex-flow: column">
              <n-list style="width: 100%" hoverable clickable>
                <n-list-item v-for="num in thisPageOrder2" style="height: 170px;" @click="showTemp(num),showModal = true">
                  <n-thing :title="num.orderType">
                    <template #description>
                      <n-space size="small" style="margin-top: 4px">
                        <n-tag :bordered="false" type="success" size="small">
                          {{num.startLocation}}
                        </n-tag>
                        <n-tag :bordered="false" type="success" size="small">
                          {{num.orderType}}
                        </n-tag>
                      </n-space>

                    </template>
                    <n-rate allow-half readonly v-model:value="num.orderRate"/><br>
                    {{num.orderDescription}}
                  </n-thing>
                </n-list-item>
              </n-list>
              <n-pagination style="justify-content: center" v-model:page="page2" :page-count="pageCount2" @click="pageChange2"/>
            </n-flex>
          </n-tab-pane>
          <n-tab-pane name="To be evaluated" tab="待评价">
            <n-flex vertical justify="center" style="margin-top: 20px;margin-bottom: 20px; flex-flow: column">
              <n-list style="width: 100%" hoverable clickable>
                <n-list-item v-for="num in thisPageOrder3" style="height: 170px;" @click="showTemp(num),showModal = true">
                  <n-thing :title="num.orderType">
                    <template #description>
                      <n-space size="small" style="margin-top: 4px">
                        <n-tag :bordered="false" type="success" size="small">
                          {{num.startLocation}}
                        </n-tag>
                        <n-tag :bordered="false" type="success" size="small">
                          {{num.orderType}}
                        </n-tag>
                      </n-space>

                    </template>
                    <n-rate allow-half readonly v-model:value="num.orderRate"/><br>
                    {{num.orderDescription}}
                  </n-thing>
                </n-list-item>
              </n-list>
              <n-pagination style="justify-content: center" v-model:page="page3" :page-count="pageCount3" @click="pageChange3"/>
            </n-flex>
          </n-tab-pane>
          <n-tab-pane name="finish" tab="已完成">
            <n-flex vertical justify="center" style="margin-top: 20px;margin-bottom: 20px; flex-flow: column">
              <n-list style="width: 100%" hoverable clickable>
                <n-list-item v-for="num in thisPageOrder4" style="height: 170px;" @click="showTemp(num),showModal = true">
                  <n-thing :title="num.orderType">
                    <template #description>
                      <n-space size="small" style="margin-top: 4px">
                        <n-tag :bordered="false" type="success" size="small">
                          {{num.startLocation}}
                        </n-tag>
                        <n-tag :bordered="false" type="success" size="small">
                          {{num.orderType}}
                        </n-tag>
                      </n-space>

                    </template>
                    <n-rate allow-half readonly v-model:value="num.orderRate"/><br>
                    {{num.orderDescription}}
                  </n-thing>
                </n-list-item>
              </n-list>
              <n-pagination style="justify-content: center" v-model:page="page4" :page-count="pageCount4" @click="pageChange4"/>
            </n-flex>
          </n-tab-pane>
        </n-tabs>
      </n-flex>

    </n-card>
  </n-flex>
  <n-modal v-model:show="showModal">
    <n-card
        :style="cardStyle"
        :bordered="false"
        size="huge"
        role="dialog"
        aria-modal="true"
    >
      <template #header>
        <h1 style="text-align: center;">{{thisArr.orderType}}</h1>
      </template>
      <div style="margin:0 10% 10px 10%;position: relative">
      <n-space vertical>
        <n-steps
            size="medium"
            :current="current"
            :status="currentStatus"
        >
          <n-step
              title="已发起"
              :description="thisArr.creationTime"
          />
          <n-step
              title="进行中"
              :description="thisArr.endTime"
          />
          <n-step
              title="待评价"
              description=""
          />
          <n-step
              title="已完成"
              description=""
          />
        </n-steps>
      </n-space>
      </div>
      <div style="position: relative;">
        <n-space align="flex-end" style="bottom: 0;">
          <n-avatar
              round
              size="small"
              src="/messageAvatar/头像.jpg"
          />
          <div style="margin: 0 auto;height: 30px;">{{thisArr.userName}}</div>
        </n-space>
        <div style="font-size: 20px;margin: 10px 0;">订单详情:</div>
        <div class="div-text">{{thisArr.orderDescription}}</div>
        <div v-if="showEvaluation">
          <div style="font-size: 20px;margin: 10px 0;">订单评价:</div>
              <n-rate style="margin: 0 auto;" allow-half v-model:value="thisArr.orderRate"/>
          <n-input placeholder="请输入评价:" type="textarea" style="height: 150px;width: 100%;max-height: 300px;" v-model:value="thisArr.orderReview">
          </n-input>
          <n-upload
              :action="BASE_URL+'/v1/file/upload'"
              v-model:file-list="fileList"
              :on-finish="(file) => {file.file.fullPath = file.event.currentTarget.response.data;console.log(file);console.log(fileList)}"
              list-type="image-card"
              response-type="json"
              @remove="handleRemove"
          />
          <n-modal
              v-model:show="showModal1"
              preset="card"
              style="width: 600px"
          >
            <img :src="dialogImageUrl" style="width: 100%">
          </n-modal>
            <n-button style="width: 100%;margin: 20px 0;" @click="saveOrderReview">评价</n-button>
            <n-button style="width: 100%;margin: 20px 0;" type="error">投诉</n-button>
        </div>
        <div v-if="showDisEvaluation">
          <div style="font-size: 20px;margin: 10px 0;">订单评价:</div>
          <n-rate style="margin: 20px auto;" allow-half readonly :default-value="thisArr.orderRate"/>
          <div class="div-text">{{thisArr.orderReview}}</div>
          <img v-if="thisArr.commentImgUrl!=null" :src="BASE_URL+url" width="100" v-for="url in thisArr.commentImgUrl.split(',')">
        </div>
        <div v-if="showArriveButton">
          <n-button style="width: 100%;margin: 20px 0;" @click="orderArrive">已送达</n-button>
        </div>
      </div>
    </n-card>
  </n-modal>
</template>

<style scoped>
.div-text{
  height: 150px;
  line-height: 30px;
  text-indent:24px;
  font-size: 14px;
}
</style>